<template>
  <div id="select_pay">
    <div class="order_info block">
      <div style="text-align: center; color: #999999;">待支付金额</div>
      <p class="money"><span>￥</span>{{money}}</p>
      <div class="dashed-line"></div>
      <div class="flex space-between">
        <span style="color: #999999;">订单金额：</span>
        <span>￥{{money}}</span>
      </div>
    </div>
    <p style="color: #999999; font-size: 14px;">选择支付方式</p>
    <div class="block">
      <div class="pay_type" @click="pay_type=1">
        <img src="./imgs/wx_icon.png">
        <span>微信支付</span>
        <!--<div class="radio" :class="{active: pay_type==1}"><div class="dian"></div></div>-->
      </div>
      <div class="submit" @click="wxpay" style="background-color: #00CDB6;">微信支付￥{{money}}</div>
    </div>
    <div class="block">
      <div class="pay_type" @click="pay_type=2">
        <img src="./imgs/under_pay.png">
        <span>线下支付</span>
        <!--<div class="radio" :class="{active: pay_type==2}"><div class="dian"></div></div>-->
      </div>
      <div class="submit" style="background-color: #FF9600;" @click="goUrl('center','offlinePay')">线下支付￥{{money}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'company-bill',
    data () {
      return {
        orderId: '',
        orderInfo: {},
        money: '0',
        pay_type: 1
      }
    },
    created () {
      this.orderId = this.$route.query.id?this.$route.query.id.toString():'';
      this.getOrderInfo();
    },
    mounted(){

    },
    methods: {
      goUrl(path, funCode) {
        this.$router.push({
          path: '/'+path,
          query:{
            funCode: funCode,
            id: this.orderId
          }
        })
      },
      getOrderInfo() {
        this.$http.post('yxc/order/orderInfo',{
          id: this.orderId
        }).then(res=>{
          if(res.code == 200) {
            this.orderInfo = res.data;
             this.money = this.$options.filters['accAdd'](this.orderInfo.leaseFee, this.orderInfo.serviceFee)
          }
        });
      },
      //微信支付
      wxpay(){
        let that = this;
        //模拟支付
        /*this.$http.get('yxc/order/testPayOrder?id='+this.orderId).then(res=>{
          if(res.code=='') {
            this.goUrl('center','bill')
          }
        })*/
        this.$http.get('yxc/order/payWxOrder',{
          params: {
            id: this.orderId,
            openid: localStorage.getItem('WX_UID')//'oix3Gt1H2UDVFc66HJ1szdyu9x1A'
          }
        }).then(res=>{
          var wxconfig = res.data;
          if(res.code != '200') {
            console.log(res.message)
            return false;
          }

          //微信支付
          function onBridgeReady(){
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                "appId": wxconfig.appId,     //公众号名称，由商户传入
                "timeStamp":wxconfig.timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr":wxconfig.nonceStr, //随机串
                "package":wxconfig.package,
                "signType":wxconfig.signType,         //微信签名方式：
                "paySign":wxconfig.paySign //微信签名
              },
              function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  that.$toast('支付成功')
//                  that.goUrl('company', 'bill')
                  that.$router.push({path: '/company?funCode=bill', replace: true})
                }
              });
          }
          if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
          }else{
            onBridgeReady();
          }

        })


      },


    },

  }
</script>

<style lang="scss" scoped>
  #select_pay {
    margin: 0 10px;
    margin-bottom: 80px;
  }

  h3 {
    margin: 0px 0px;
  }

  .submit {
    background: rgba(28, 103, 255, 1);
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    margin: 20px 10px;
    font-size: 14px;
  }

  .btn-group{
    margin: 0 auto;
    text-align: center;
  .reset_btn{background-color: #fff; border: 1px solid #B5B5B5; color:#999; height: 44px; line-height: 44px; margin-right: 15px; padding: 0 40px;}
  .sure_btn{background: rgba(28, 103, 255, 1); color: #fff; padding: 0px 50px; height: 44px; line-height: 44px;}
  .defult_btn{background-color: #E5E5E5;}
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }
  .align-center{
    align-items: center;
  }

  .space-between {
    justify-content: space-between;
  }
  .block {
    margin: 10px auto;
    border-radius: 5px;
    background-color: #fff;
    padding: 15px 15px;
  }
  .dashed-line{border-bottom:1px solid #eeeeee; margin: 10px auto;}
  .center{text-align: center;}

  .order_info{font-size: 13px;}
  .order_info .money{text-align: center; color: #333; font-size: 30px; margin: 5px 0px 25px 0px;}
  .order_info .money span{font-size: 18px;}
  .pay_type{
    height: 54px;
    line-height: 54px;
    background-color: #F7F9FA;
    font-size: 14px;
    color: #333333;
  }
  .pay_type img{display: inline; width: 30px; height: 30px; position: relative; top: 10px; left: 15px;}
  .pay_type span{margin-left: 20px;}
  .pay_type .radio{float: right; height: 18px; line-height: 18px; width: 18px; border: 1px solid #B5B5B5; position: relative; top: 18px; right: 10px; border-radius: 50%;}
  .pay_type .dian{width: 14px; height: 14px; background-color: #F7F9FA; border-radius: 50%; margin: 0 auto; margin-top: 2px;}
  .pay_type .active{
    border: 1px solid #00CDB6;
    .dian{background-color: #00CDB6;}
  }
</style>
<style>
  .el-step__icon-inner {
    font-weight: normal;
  }


</style>
